<template>
  <div>
    <div class="me" :class="!isCollapse ? 'me_active' : ''">
      <div class="top" v-if="isCollapse" @click.stop="chooseExpand">
        <el-icon><Operation /></el-icon>
      </div>
      <div v-else class="top_expand">
        系统导航<el-icon @click.stop="chooseExpand"><Operation /></el-icon>
      </div>
      <div v-if="isCollapse || !isCollapse" class="meau_class">
        <el-menu
          v-if="meaus.length > 0"
          :default-active="route.fullPath"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @select="clickItem">
        <el-sub-menu v-for="(item, index) in meaus" :key="index" :index="item.path">
            <template #title>
              <el-icon><component :is="`ChatLineSquare`"></component></el-icon>
              <span class="sub_title">{{ item.meta.title }}</span>
            </template>
            <el-menu-item v-for="(i, index) in item.children" :key="index" :index="i.path">
              <el-icon><component :is="`ChatLineSquare`"></component></el-icon>
              {{ i.meta.title }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
        
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,  computed, watch, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import routerMessage from "../router/index"
let router = useRouter();
let route = useRoute();

let meaus = ref([]);




onMounted(() => {
  meaus.value = routerMessage.options.routes.find(v=>v.name === "layout").children

  document.styleSheets[0].addRule(".el-popper__arrow::before", "display: none");

  document.querySelectorAll(".is-dark").forEach((v) => {
    v.style.background = "white";
    v.style.color = "#666";
    v.style.border = "none";
    v.style.boxShadow = " 0px 6px 20px rgba(25, 25, 26, 0.06), 0px 2px 12px rgba(25, 25, 26, 0.04)";
  });

  
});

const isCollapse = ref(false);
let chooseExpand = () => {
 
  isCollapse.value = !isCollapse.value;

};



let clickItem = (index, indexPath) => {
  router.push({
    path: index,
  });
};
</script>

<style lang="less" scoped>
.me_active {

  /deep/ .el-menu {
    border-right: none !important; 
   
}

  box-shadow: 5px -11px 9px -4px rgba(0, 0, 0, 0.3);
}

.me_active{
 border-right: 1px solid #dcdfe6;
}

.me .sub_title {
  font-size: 16px;
}
.top_expand {
  position: relative;
 
  color: #212121;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.top_expand::after {
  position: absolute;
  content: " ";
  bottom: 5px;
  width: 80%;
  left: 50%;
  height: 1px;
  transform: translateX(-50%);
  background: #dcdfe6;
}
.me {
  min-height: calc(100vh - 70px);
}

.top {
  position: relative;
  border-right: 1px solid #dcdfe6;
  width: 64px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top::after {
  position: absolute;
  content: " ";
  bottom: 0;
  background: #dddddd;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);

  width: 30px;
}
.el-menu-vertical-demo {
  font-size: 14px;
  height: 100%;
}

.meau_class {
  max-height: calc(100vh - 136px);
  overflow-y: scroll;
}

.meau_class::-webkit-scrollbar {
  display: none;
}

.meau_class .el-menu--vertical {
  min-height: calc(100vh - 136px);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
